<template>
  <a-drawer class="form-check-config" width="90%" @close="close"
            title="校验规则配置" :visible="visible">
    <FormCheckEmptyConfig :form-definition="formDefinition"
                          :dataSource="formCheckGroups" v-if="!formCheckGroups || !formCheckGroups.length" />
    <template v-else>
      <div class="form-check-config-list-button-wrapper">
        <a-button icon="plus" shape="round" type="primary" @click="addNew">新增规则</a-button>
        <a-button icon="delete" shape="round" @click="removeSelected">删除</a-button>
        <a-button icon="check-circle" shape="round" @click="enableSelected">启用</a-button>
        <a-button icon="stop" shape="round" @click="disableSelected">停用</a-button>
      </div>
      <HTable :configurable="false" style="margin-top: 10px" ref="table"
              :data-source="formCheckGroups" @selectChange="selectChange"
              select="multiple" :columns="columns" :pagination="false">
        <template slot="actionIdsSlot" slot-scope="text, record, index">
          {{ getActionNames(record.actionIds) }}
        </template>
        <template slot="enableSlot" slot-scope="text, record, index">
          <a-checkbox :checked="record.enable"
                      @click.native.stop="() => record.enable = !record.enable" />
        </template>
        <template slot="action" slot-scope="text, record, index">
          <a @click.stop="() => edit(record)">编辑</a>
        </template>
      </HTable>
    </template>
    <FormCheckConfigModal
      ref="FormCheckConfigModal" @ok="handleFormCheckConfigModalOK"
      :form-definition="formDefinition" />
  </a-drawer>
</template>
<script>
import { createProps } from '@/utils'
import { createFormDefinition } from '@comp/hhd/design/FormDesigner/types'
import FormCheckEmptyConfig from '@comp/hhd/design/FormDesigner/form/check/FormCheckEmptyConfig.vue'
import HTable from '@comp/hhd/HTable/HTable.vue'
import FormCheckConfigModal from '@comp/hhd/design/FormDesigner/form/check/FormCheckConfigModal.vue'

export default {
  name: 'FormCheckConfig',
  components: { FormCheckConfigModal, HTable, FormCheckEmptyConfig },
  props: {
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      columns,
      selectRows: [],
      visible: false
    }
  },
  methods: {
    handleFormCheckConfigModalOK(group) {
      let list = [...this.formDefinition.formCheckGroups]
      let index = list.findIndex(item => item.id === group.id)
      if (index !== -1) {
        this.formDefinition.formCheckGroups.splice(index, 1, group)
      } else {
        this.formDefinition.formCheckGroups.push(group)
      }
    },
    selectChange({ selectRows }) {
      this.selectRows = selectRows
    },
    edit(record) {
      this.$refs.FormCheckConfigModal.setData(record)
    },
    removeSelected() {
      this.$confirm({
        title: '确认删除',
        content: '是否删除选中数据?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.formDefinition.formCheckGroups = this.formDefinition.formCheckGroups.filter(group => !!!(this.selectRows || []).includes(group))
          this.$refs.table.clearSelection()
        }
      })
    },
    enableSelected() {
      (this.selectRows || []).forEach(item => item.enable = true)
    },
    disableSelected() {
      (this.selectRows || []).forEach(item => item.enable = false)
    },
    setData() {
      this.open()
    },
    close() {
      this.visible = false
    },
    open() {
      this.visible = true
    },
    addNew() {
      this.$refs.FormCheckConfigModal.setData()
    },
    getActionNames(actionIds) {
      if (!actionIds || actionIds === '') return undefined
      actionIds = actionIds.split(',')
      return actionIds.map(actionId => {
        let actions = this.formDefinition.actions || []
        let action = actions.find(action => action.id === actionId)
        return action && action.actionName || undefined
      }).filter(action => !!action).toString()
    }
  },
  computed: {
    formCheckGroups() {
      let res = this.formDefinition && this.formDefinition.formCheckGroups || []
      // this.formDefinition && (this.formDefinition.formCheckGroups = res)
      this.formDefinition && (this.$set(this.formDefinition, 'formCheckGroups', res))
      return this.formDefinition.formCheckGroups
    }
  }
}
const columns = [
  {
    title: '规则名称',
    dataIndex: 'checkGroupName'
  },
  {
    title: '适配权限范围',
    dataIndex: 'actionIds',
    scopedSlots: { customRender: 'actionIdsSlot' }
  },
  {
    title: '是否启用',
    dataIndex: 'enable',
    scopedSlots: { customRender: 'enableSlot' }
  },
  {
    title: '排序',
    dataIndex: 'sort'
  }
]
</script>
<style>
.form-check-config {
}

.form-check-config .ant-drawer-body {
  padding: 0;
}

.form-check-config-list-button-wrapper > button {
  margin-right: 10px;
}

.form-check-config-list-button-wrapper {
  padding: 10px;
  background: #f0f0f0;
}
</style>